<template>
    <div style="div">
        <el-upload
            action="http://mpingtest.ameimeika.com/api/upload"
            list-type="picture"
            ref="upload"
            :accept="accept"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :on-change="changeUpload"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
            :headers="headers"
            :limit="fileNum"
            :file-list="fileList"
        >
            <!-- :class="{hide:hideUpload}" -->
            <!-- <i class="el-icon-plus"></i> -->
            <el-button :class="{hide:hideUpload}" size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>
<script>
import $ from "jquery";
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            hideUpload: false,
            imgFlag: []
            // imgUploadFlag:true,
        };
    },
    props: {
        fileList: Array,
        fileNum: Number,
        width: Number,
        height: Number,
        accept: String
    },

    computed: {
        headers() {
            return {
                Authorization: "Bearer " + sessionStorage.getItem("token") // 直接从本地获取token就行
            };
        }
    },
    methods: {
        handleAvatarSuccess(res, file, fileList) {
            this.$message({
                message: res.msg,
                type: "warning"
            });
            for (let i = 0; i < this.imgFlag.length; i++) {
                if (this.imgFlag[i].response) {
                    if (this.imgFlag[i].response.code != 0) {
                        this.imgFlag.splice(i, 1);
                    }
                }
            }
        },
        getLength(fileList) {
            this.hideUpload = fileList.length >= this.fileNum;
        },
        handleRemove(file, fileList) {
            this.hideUpload = fileList.length >= this.fileNum;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        changeUpload(file, fileList) {
            this.hideUpload = fileList.length >= this.fileNum;
            this.imgFlag = fileList;
        },
        beforeAvatarUpload(file) {
            if (this.hideUpload) {
            }
        },
        //字符串截取
        getCaption(obj) {
            var index = obj.lastIndexOf(".com/");
            obj = obj.substring(index + 5, obj.length);
            return obj;
        },
        submitUpload() {
            let oldList = [];
            let newList = [];
            for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
                if (this.$refs.upload.uploadFiles[i].percentage) {
                    newList.push(
                        this.$refs.upload.uploadFiles[i].response.data
                    );
                } else {
                    oldList.push(
                        this.getCaption(this.$refs.upload.uploadFiles[i].url)
                    );
                }
            }
            this.imgFlag = [...oldList, ...newList];
            return this.imgFlag;
        }
    }
};
</script>
<style scoped>
.div,
.div > div {
    display: inline;
}
.hide {
    display: none;
}
</style>
